<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Login</title>
		<!-- CSS only -->
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
			crossorigin="anonymous"
		/>
	</head>
	<body>
		<section class="vh-100" style="background-color: #eee">
			<div class="container h-100">
				<div class="row d-flex justify-content-center align-items-center h-100">
					<div class="col-lg-12 col-xl-11">
						<div class="card text-black" style="border-radius: 25px">
							<div class="card-body p-md-5">
								<div class="row justify-content-center">
									<div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
										<p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">
											Sign up
										</p>

										<form action="/register" method="POST" class="mx-1 mx-md-4">
											<% if (messages.error) { %>
											<div class="alert alert-danger">
												<strong><%= messages.error %></strong>
											</div>
											<% } %>
											<div class="d-flex flex-row align-items-center mb-4">
												<i class="fas fa-user fa-lg me-3 fa-fw"></i>
												<div
													data-mdb-input-init
													class="form-outline flex-fill mb-0"
												>
													<input
														type="text"
														name="name"
														id="form3Example1c"
														class="form-control"
													/>
													<label class="form-label" for="form3Example1c"
														>Your Name</label
													>
												</div>
											</div>

											<div class="d-flex flex-row align-items-center mb-4">
												<i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
												<div
													data-mdb-input-init
													class="form-outline flex-fill mb-0"
												>
													<input
														type="email"
														name="email"
														id="form3Example3c"
														class="form-control"
													/>
													<label class="form-label" for="form3Example3c"
														>Your Email</label
													>
												</div>
											</div>

											<div class="d-flex flex-row align-items-center mb-4">
												<i class="fas fa-lock fa-lg me-3 fa-fw"></i>
												<div
													data-mdb-input-init
													class="form-outline flex-fill mb-0"
												>
													<input
														type="password"
														name="password"
														id="form3Example4c"
														class="form-control"
													/>
													<label class="form-label" for="form3Example4c"
														>Password</label
													>
												</div>
											</div>

											<div
												class="form-check d-flex justify-content-center mb-5"
											>
												<input
													class="form-check-input me-2"
													type="checkbox"
													value=""
													id="form2Example3c"
												/>
												<label class="form-check-label" for="form2Example3">
													I agree all statements in
													<a href="#!">Terms of service</a>
												</label>
											</div>

											<div
												class="d-flex justify-content-center mx-4 mb-3 mb-lg-4"
											>
												<button
													type="submit"
													data-mdb-button-init
													data-mdb-ripple-init
													class="btn btn-primary btn-lg"
												>
													Register
												</button>
											</div>
										</form>
									</div>
									<div
										class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2"
									>
										<img
											src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-registration/draw1.webp"
											class="img-fluid"
											alt="Sample image"
										/>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- JavaScript Bundle with Popper -->
		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
			crossorigin="anonymous"
		></script>
	</body>
</html>
